<template>
    <div class="w-full mx-auto">
        <div class="block lg:grid lg:grid-cols-4 lg:gap-1">
            <a-card style="height: 65px;" class="rounded-sm mt-3" :body-style="{ padding: 0, height: '65px' }"
                :bordered="false" hoverable>
                <div class="flex justify-between h-full">
                    <div class="en-title bg-blue-600">NU</div>
                    <div class="w-full ml-3.5 flex justify-between items-center">
                        用户统计
                        <a-space size="large" class="mr-3">
                            <div class="text-right">
                                <div>总数</div>
                                <div>{{ data_info.user_all }}</div>
                            </div>
                            <div class="text-right">
                                <div>新增</div>
                                <div><icon-caret-up class="text-green-600" /> {{ data_info.user_today }}</div>
                            </div>
                        </a-space>
                    </div>
                </div>
            </a-card>
            <a-card style="height: 65px;" class="rounded-sm mt-3 lg:ml-2" :body-style="{ padding: 0, height: '65px' }"
                :bordered="false" hoverable>
                <div class="flex justify-between h-full">
                    <div class="en-title bg-red-600">NA</div>
                    <div class="w-full ml-3.5 flex justify-between items-center">
                        总充值
                        <a-space size="large" class="mr-3">
                            <div class="text-right">
                                <div>总数</div>
                                <div>{{ data_info.recharge_all }}</div>
                            </div>
                            <div class="text-right">
                                <div>新增</div>
                                <div><icon-caret-down class="text-red-600" /> {{ data_info.recharge_today }}</div>
                            </div>
                        </a-space>
                    </div>
                </div>
            </a-card>
            <a-card style="height: 65px;" class="rounded-sm mt-3 lg:ml-2" :body-style="{ padding: 0, height: '65px' }"
                :bordered="false" hoverable>
                <div class="flex justify-between h-full">
                    <div class="en-title bg-pink-600">LC</div>
                    <div class="w-full ml-3.5 flex justify-between items-center">
                        总提现
                        <a-space size="large" class="mr-3">
                            <div class="text-right">
                                <div>总数</div>
                                <div>{{ data_info.withdrawal_all }}</div>
                            </div>
                            <div class="text-right">
                                <div>新增</div>
                                <div><icon-caret-down class="text-red-600" /> {{ data_info.withdrawal_today }}</div>
                            </div>
                        </a-space>
                    </div>
                </div>
            </a-card>
            <!-- <a-card style="height: 65px;" class="rounded-sm mt-3 lg:ml-2" :body-style="{ padding: 0, height: '65px' }"
                :bordered="false" hoverable>
                <div class="flex justify-between h-full">
                    <div class="en-title bg-green-600">OC</div>
                    <div class="w-full ml-3.5 flex justify-between items-center">
                        操作统计
                        <a-space size="large" class="mr-3">
                            <div class="text-right">
                                <div>总数</div>
                                <div>100</div>
                            </div>
                            <div class="text-right">
                                <div>新增</div>
                                <div><icon-caret-up class="text-green-600" /> 15</div>
                            </div>
                        </a-space>
                    </div>
                </div>
            </a-card> -->
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { Message } from "@arco-design/web-vue";
import request from '@/api/dashboard'

const data_info = ref({});
const getList = async () => {
    const { data } = await request.get_list();
    data_info.value = data;
};
getList();
</script> 
<style scoped>
.en-title {
    width: 75px;
    color: #fff;
    text-align: center;
    line-height: 65px;
    font-weight: bold;
    font-size: 1.3em;
    border-radius: 2px 0 0 2px;
}
</style>